<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钟方宿的个人主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }
        header {
            background: #35424a;
            color: #ffffff;
            padding-top: 30px;
            min-height: 70px;
            border-bottom: #e8491d 3px solid;
        }
        header a {
            color: #ffffff;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 16px;
        }
        header li {
            float: right;
            display: inline;
            padding: 0 15px 0 15px;
        }
        section#about {
            padding: 20px 0;
        }
        section#skills {
            padding: 20px 0;
            background: #ebebeb;
        }
        section#contact {
            padding: 20px 0;
        }
        footer {
            background: #35424a;
            color: #ffffff;
            text-align: center;
            padding: 10px 0;
            margin-top: 20px;
        }
        .highlight {
            color: #e8491d;
        }
    </style>
</head>
<body>

<header>
    <div class="container">
        <h1>钟方宿</h1>
        <nav>
            <ul>
                <li><a href=" ">关于我</a ></li>
                <li><a href="#skills">技能</a ></li>
                <li><a href="#contact">联系我</a ></li>
            </ul>
        </nav>
    </div>
</header>

<section id="about">
    <div class="container">
        <h2>关于我</h2>
        <p>你好！我叫钟方宿，是2025级新生，专注于各种小说的阅读。</p >
    </div>
</section>

<section id="skills">
    <div class="container">
        <h2>技能</h2>
        <ul>
            <li><a href="https://www.douyin.com/?recommend=1">刷视频</a></li>
            <li><p id="showimage">会睡觉</p></li>
            <img id="myimage" src="https://img.keaitupian.cn/newupload/01/1675066117894875.jpg" alt="image" style="display:none;">
            <script>
                document.getElementById('showimage').addEventListener('click',function(){
                    document.getElementById('myimage').style.display = 'block';
                });
            </script>
            <li><a href="https://cn.bing.com/images/search?view=detailV2&ccid=ZFb0iRcy&id=C5CFDB4288CB6BDDE192728472B9EC975BC54699&thid=OIP.ZFb0iRcyWFa7kgtV5mFpPQAAAA&mediaurl=https%3A%2F%2Fso1.360tres.com%2Ft01160af1ac03d4d0c8.jpg&exph=200&expw=200&q=sb&FORM=IRPRST&ck=4C242EFFB949EC5E56B65B17E3B1EB29&selectedIndex=0&itb=0&cw=1145&ch=607&ajaxhist=0&ajaxserp=0">打王者</a></li>
            <li>吃饭</li>
        </ul>
    </div>
</section>

<section id="contact">
    <div class="container">
        <h2>联系我</h2>
        <p>Email: zhongfangsu@example.com</p >
        <p>电话: 123-456-7890</p >
    </div>
</section>

<footer>
    <div class="container">
        &copy; 2025 钟方宿的个人主页
    </div>
</footer>

</body>
</html>